<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>按钮</button>
    <script>
        // 1.在es6中类没有变量函数提升（预解析）。所以实例化对象必须写在定义好的类的下面
        //         报错
        // var ldh = new Star('刘德华')
        // console.log(ldh.uname);
        // class Star {
        //     constructor(uname, age) {
        //         this.uname = uname
        //         this.age = age

        //     }

        // }
        //因为es6没有预解析中的变量提升 代码是从上往下执行的。所以实例化对象必须写在类下面
        // var ldh = new Star('刘德华')
        // console.log(ldh.uname);



        // 2.类里面的共有属性和方法一定要加this使用
        var that;
        var _that;
        class Star {
            // (1)只要new了 代码自动调用constructor函数,执行里面的程序。所以可以直接在下面调用方法 
            constructor(uname, age) {//3.constructor 里面的this指向 创建的实例对象
                that = this
                console.log(this);//指向Star里的ldh实例对象
                this.uname = uname
                this.age = age
                // 必须要指明是哪个实例对象调用sing 所以必须加this。
                this.sing()//刘德华
                this.btn = document.querySelector('button')
                this.btn.onclick = this.sing

            }
            sing() {
                // 3.这个sing方法里面的this指向的是btn  因为这个按钮调用了这个函数
                // console.log(this.uname);//btn按钮里面没有uname属性 所以undefined
                console.log(that.uname);//修改this的的指向 this保存到变量里 
            
            }
            donce() {
                // 3.谁调用了这个函数 this就指向谁
                _that = this
                console.log(this);

            }

        }
        var ldh = new Star('刘德华')
        console.log(that === ldh);//true constructor里的this确实指向调用它的实例对象
        ldh.donce()//Star {刘德华}
        console.log(_that === ldh);//true


    </script>
</body>

</html>